<template>
  <div>
    <!--二手演出商品管理 -->
    <p></p>
    <div>
      <el-form :inline="true" class="orderform">
        <el-row>
          <el-col :span="6">
            <el-form-item>
              <el-input style="width: 300px" placeholder="请输入..." v-model="tag" class="search_tag" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <span>商品状态:</span>
            <el-select v-model="select_value" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-form-item>
              <el-button type="primary" @click="btn_search()"><i class="el-icon-search"></i> 搜索</el-button>
              <el-button @click="btn_clear()"><i class="el-icon-remove-outline"></i> 重置</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" class="mydiv" @click="createcustomer"><i class="el-icon-circle-plus"></i>添加
            </el-button>
          </el-col>
        </el-row>

        <el-table
          :data="tableData"
          ref="multipleTable"
          :highlight-current-row="true"
          border>
          <el-table-column
            prop="id"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="showName"
            label="演出名称">
          </el-table-column>
          <el-table-column
            prop="showType"
            label="演出类型">
          </el-table-column>
          <el-table-column
            prop="showPrice"
            label="演出价格区间">
          </el-table-column>
          <el-table-column
            prop="showStatus"
            label="销售状态">
          </el-table-column>
          <el-table-column
            prop="showTime"
            label="演出时间">
          </el-table-column>
          <el-table-column
            prop="showCity"
            label="演出城市">
          </el-table-column>
          <el-table-column
            prop="showField"
            label="演出场地">
          </el-table-column>
          <el-table-column
            prop="showAddress"
            label="详细地址">
          </el-table-column>
          <el-table-column
            prop="showOrganiser"
            label="主办方">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClickDeleteConfirm(scope.row)" type="text">上下架</el-button>
              <el-button type="text" @click="handleClickModify(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="mydiv">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pageNo"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="totalDataNumber"
            class="table-pagination">
          </el-pagination>
        </div>
      </el-form>

      <!-- 新增演出弹出框 -->


      <!-- 修改客户弹出框 -->
      <el-dialog title="修改" :visible.sync="dialogFormModifyVisible">

        <el-form :model="form">
          <el-form-item label="客户状态" :label-width="formLabelWidth">
            <el-select v-model="form.status" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="户口所在地" :label-width="formLabelWidth">
            <el-input v-model="form.residence"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码" :label-width="formLabelWidth">
            <el-input v-model="form.idno"></el-input>
          </el-form-item>
          <el-form-item label="现居住地" :label-width="formLabelWidth">
            <el-input v-model="form.home_address"></el-input>
          </el-form-item>
          <el-form-item label="工作单位" :label-width="formLabelWidth">
            <el-input v-model="form.workplace"></el-input>
          </el-form-item>
          <el-form-item label="第一联系人" :label-width="formLabelWidth">
            <el-input v-model="form.first_contact"></el-input>
          </el-form-item>
          <el-form-item label="关系" :label-width="formLabelWidth">
            <el-input v-model="form.first_relation"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" :label-width="formLabelWidth">
            <el-input v-model="form.first_phone"></el-input>
          </el-form-item>
          <el-form-item label="第二联系人" :label-width="formLabelWidth">
            <el-input v-model="form.second_contact"></el-input>
          </el-form-item>
          <el-form-item label="关系" :label-width="formLabelWidth">
            <el-input v-model="form.second_relation"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" :label-width="formLabelWidth">
            <el-input v-model="form.second_phone"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="btn_modify_cancel">取 消</el-button>
          <el-button type="primary" @click="btn_modify_submit">确 定</el-button>
        </div>
      </el-dialog>


      <!-- 点击删除按钮，删除确认框-->
      <el-dialog
        title="提示"
        :visible.sync="deleteDialogVisible"
        width="30%">
        <span>确定删除选择客户? </span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClickDelete">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'index',
    data() {
      return {
        tag: '',
        select_value: '', // 客户状态
        options: [{
          value: '审核中',
          label: '审核中'
        }, {
          value: '已上架',
          label: '已上架'
        }, {
          value: '已下架',
          label: '已下架'
        }],
        typeoptions: [{
          value: '官方',
          label: '官方'
        }, {
          value: '转票',
          label: '转票'
        }],
        allData: [], // 所有前端分页数据
        tableData: [], // 表格数据 仅展示当前页的数据
        pageNo: 1, // 当前页数
        totalDataNumber: 0, // 总记录数
        pageSize: 5,
        deleteDialogVisible: false, // 删除确认对话框
        dialogFormVisible: false, // 弹出添加代理商dialog form
        dialogFormModifyVisible: false, // 修改框
        formLabelWidth: '200px', // 弹出框form宽
        form: {
          id: '',
          showName: '',
          showType: '',
          showCover: [],
          showPrice: '',
          showStatus: '待审核',
          showTime: '',
          showCity: '',
          showField: '',
          showFieldPhoto: [],
          showAddress: '',
          showActors: [],
          showOrganiser: ''
        }
      }
    },
    methods: {
      uploadUrl() {
        return process.env.Upload_URL
      },
      handleRemove1(file, fileList) {
        console.log(file, fileList)
        this.form.showCover = ''
      },
      handleRemove2(file, fileList) {
        console.log(file, fileList)
        this.form.showFieldPhoto = ''
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      btn_search() {
        const vm = this
        axios.get(process.env.BASE_API + '/show/search', {
          params: {
            tag: this.tag,
            status: this.select_value
          }
        }).then(function(response) {
          var obj = response.data
          if (obj.code !== 10000) {
            vm.$message.error(obj.message)
            vm.totalDataNumber = 0
            vm.allData = []
            vm.tableData = []
          } else {
            vm.totalDataNumber = parseInt(obj.total)
            if (vm.totalDataNumber > 0) {
              vm.allData = obj.data
              vm.tableData = obj.data.slice(0, vm.pageSize)
            } else {
              vm.allData = []
              vm.tableData = []
            }
          }
        }).catch(function(error) {
          alert(error)
        })
      },
      btn_clear() {
        this.tag = ''
        this.select_value = ''
      },
      handleCurrentChange(val) {
        this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
      },
      createcustomer() {
        this.dialogFormVisible = true
      },
      btn_create_cancel() {
        this.dialogFormVisible = false
      },
      btn_create_submit() {
        console.log(this.form)
        if (this.form.showName === '' || this.form.showName === undefined) {
          this.$message.error('请输入演出名称，演出名称不能为空')
          return
        } else {
          const vm = this
          var params = new URLSearchParams()
          params.append('showName', vm.form.showName)
          params.append('showType', vm.form.showType)
          params.append('showCover', vm.form.showCover)
          params.append('showPrice', vm.form.showPrice)
          params.append('showStatus', vm.form.showStatus)
          params.append('showTime', vm.form.showTime)
          params.append('showCity', vm.form.showCity)
          params.append('showField', vm.form.showField)
          params.append('showFieldPhoto', vm.form.showFieldPhoto)
          params.append('showAddress', vm.form.showAddress)
          params.append('showActors', vm.form.showActors)
          params.append('showOrganiser', vm.form.showOrganiser)
          axios.post(process.env.BASE_API + '/show/create', params).then(function(response) {
            var obj = response.data
            if (obj.code !== 10000) {
              vm.$message.error(obj.message)
            } else {
              vm.$message(obj.message)
              vm.clearform()
              vm.pageNo = 1
              vm.btn_search()
            }
          }).catch(function(error) {
            alert(error)
          })
          this.dialogFormVisible = false
        }
      },
      handleClickModify(row) {
        this.dialogFormModifyVisible = true
        this.form = row
      },
      btn_modify_cancel() {
        this.dialogFormModifyVisible = false
      },
      btn_modify_submit() {
        const vm = this
        if (vm.form.idno === '') {
          vm.$message.error('请输入身份证号码，身份证号码不能为空')
          return
        }
        var params = new URLSearchParams()
        params.append('id', vm.form.id)
        params.append('status', vm.form.status)
        params.append('name', vm.form.name)
        params.append('residence', vm.form.residence)
        params.append('idno', vm.form.idno)
        params.append('home_address', vm.form.home_address)
        params.append('workplace', vm.form.workplace)
        params.append('first_contact', vm.form.first_contact)
        params.append('first_relation', vm.form.first_relation)
        params.append('first_phone', vm.form.first_phone)
        params.append('second_contact', vm.form.second_contact)
        params.append('second_relation', vm.form.second_relation)
        params.append('second_phone', vm.form.second_phone)
        axios.post(process.env.BASE_API + '/customer/update', params).then(function(response) {
          var obj = response.data
          if (obj.code !== 10000) {
            vm.$message.error(obj.message)
          } else {
            vm.dialogFormModifyVisible = false
            vm.$message(obj.message)
            vm.clearform()
            vm.pageNo = 1
            vm.btn_search()
          }
        }).catch(function(error) {
          alert(error)
        })
      },
      handleClickDelete() {
        const vm = this
        var params = new URLSearchParams()
        params.append('id', this.form.id)
        axios.post(process.env.BASE_API + '/customer/delete', params).then(function(response) {
          var obj = response.data
          if (obj.code !== 10000) {
            vm.$message.error(obj.message)
          } else {
            vm.$message(obj.message)
            vm.deleteDialogVisible = false
            vm.pageNo = 1
            vm.btn_search()
          }
        }).catch(function(error) {
          alert(error)
        })
      },
      handleClickDeleteConfirm(row) {
        this.form = row
        this.deleteDialogVisible = true
      },
      clearform() {
        this.form.status = ''
        this.form.name = ''
        this.form.residence = ''
        this.form.idno = ''
        this.form.home_address = ''
        this.form.workplace = ''
        this.form.first_contact = ''
        this.form.first_relation = ''
        this.form.first_phone = ''
        this.form.second_contact = ''
        this.form.second_relation = ''
        this.form.second_phone = ''
      }
    }
  }
</script>

<style scoped>
  .orderform {
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .mydiv {
    float: right;
    margin-right: 10px;
  }
</style>
